<template>
  <div>
    <div>
      <a-form :form="form">
        <table id="table-1" style="margin-bottom: 15px">
          <tr>
            <td class="title">事项名称：</td>
            <td>{{ sqsx.fsxmc }}</td>
            <td class="title">受理编号：</td>
            <td>{{ sqsx.fslbh }}</td>
          </tr>
          <tr>
            <td class="title">企业名称：</td>
            <td>{{ sqsx.fqymc }}</td>
            <td class="title">审评范围：</td>
            <td>{{ sqsx.fcyjcfw }}</td>
          </tr>
          <tr>
            <td class="title">审评类型：</td>
            <td>{{ sqsx.fjclx }}</td>
            <td class="title">技术审评时间：</td>
            <td><span v-if="sqsx.fcykssj && sqsx.fcyjssj">{{ sqsx.fcykssj }}至{{ sqsx.fcyjssj }}</span><span v-else>\</span></td>
          </tr>
          <!-- <tr>
            <td>当前环节</td>
            <td>{{ job.fhjmc }}</td>
            <td>下一节</td>
            <td>{{ job.fdbr }}</td>
          </tr> -->
          <!-- <tr>
            <td>待办人</td>
            <td>陆仕华</td>
            <td>下环节待办人</td>
            <td>陪仕华</td>
          </tr> -->
        </table>
        <table id="table-1" style="text-align: center !important">
          <tr style="text-align: start !important;">
            <td style="width:120px">
              审评组成员
            </td>
            <td style="width:120px">
              廉洁自律情况
            </td>
            <td style="width:200px">
              严格按方案进行技术审评
            </td>
            <td style="width:200px">
              能发现所负责的职责范围内存在的缺陷情况
            </td>
            <td style="width:200px">
              技术审评报告涵盖全部发 现问题，缺陷描述清晰、 具体，按风险评定原则对缺陷分级且科学合理
            </td>
            <td style="width:200px">
              技术审评作业（或笔录） 清晰、可追审评过程，能与审评报告中发现的问题和现场情况相对应
            </td>
            <td style="width:120px">
              综合评价
            </td>
            <td v-if="flowState">操作</td>
            <td>备注</td>
          </tr>
          <tr v-for="item in cyxpjlList" :key="item.id" style="text-align: center !important;">
            <td class="td" v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              {{ item.fssk == '组长库'? '组长' : item.fssk == '组员库' ? '组员' : '预备审评员' }}
              :
              {{ item.fjcyxm }}
            </td>
            <td v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              <div v-if="flowState" style="width:120px">
                <a-radio-group
                  :name="item.fjcyxm"
                  :value="item.fljzlqk ? item.fljzlqk : ''"
                  :options="plainOptions"
                  @change="checkChange($event.target.value, 'fljzlqk', item)"
                />
              </div>
              <span v-else>{{ item.fljzlqk }}</span>
            </td>
            <td v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              <div v-if="flowState" style="width:120px">
                  <a-radio-group
                    :name="item.fjcyxm"
                    :value="item.fzdjcqd ? item.fzdjcqd : ''"
                    @change="checkChange($event.target.value, 'fzdjcqd', item)"
                    :options="plainOptions"
                  />
              </div>
              
              <span v-else>{{ item.fzdjcqd }}</span>
            </td>
            <td v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              <div v-if="flowState" style="width:120px">
                <a-radio-group
                  :name="item.fjcyxm"
                  :value="item.fhdqxqk ? item.fhdqxqk : ''"
                  @change="checkChange($event.target.value, 'fhdqxqk', item)"
                  :options="plainOptions"
                />
              </div>
              <span v-else> {{ item.fhdqxqk }}</span>
            </td>
            <td v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              <div v-if="flowState" style="width:120px">
                <a-radio-group
                  v-if="flowState"
                  :value="item.fxcjcqxfj ? item.fxcjcqxfj : ''"
                  @change="checkChange($event.target.value, 'fxcjcqxfj', item)"
                  :options="plainOptions"
                />
              </div>
              <span v-else> {{ item.fxcjcqxfj }}</span>
            </td>
            <td v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              <div v-if="flowState" style="width:120px">
                <a-radio-group
                  v-if="flowState"
                  :name="item.fjcyxm"
                  :value="item.fxcjczy ? item.fxcjczy : ''"
                  @change="checkChange($event.target.value, 'fxcjczy', item)"
                  :options="plainOptions"
                />
              </div>
              <span v-else> {{ item.fxcjczy }}</span>
            </td>
            <td v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              <div v-if="flowState" style="width:120px">
                <a-radio-group  
                  v-if="flowState"
                  :name="item.fjcyxm"
                  :value="item.fzhpj ? item.fzhpj : ''"
                  @change="checkChange($event.target.value, 'fzhpj', item)"
                  :options="plainOptions"
                />
              </div>
              <span v-else> {{ item.fzhpj }}</span>
            </td>

            <td style="text-align: center; line-height: 1.5" v-if="(item.fssk == '组长库' || item.fssk == '组员库') && flowState">
              <div>
                <a-button v-if="flowState" style="margin-bottom: 7px;" @click="excellent(item)"
                  >一键优秀</a-button
                >
              </div>
              <div>
                <a-button v-if="flowState" @click="empty(item)"
                  >一键清空</a-button
                >
              </div>
            </td>
            <td v-if="item.fssk == '组长库' || item.fssk == '组员库'">
              <!-- 备注 -->
              <a-input
                v-if="!disabled"
                v-model.trim="item.fbz"
                @blur="checkFbzBkur($event.target.value, 'fbz', item)"
              ></a-input>
              <span v-else>{{ item.fbz }}</span>
            </td>
          </tr>
          <tr>
            <td colspan="10">
                <div style="text-align: center;">
                  评价人：{{ sqsx.frckpdshblr }} 
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  复核人：{{ sqsx.frckpdfhblr }}
                </div>
            </td>
          </tr>
          <tr v-if="!disabled">
            <td><span style="color: red">*</span>&nbsp; 办理意见</td>
            <td colspan="9">
              <a-textarea
                style="resize: none"
                @focus="opinionModel = true"
                v-model="opinion"
              ></a-textarea>
            </td>
          </tr>
          <tr v-if="!disabled">
            <td colspan="10">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div class="dbr">
                  待办人：
                  <a-radio-group
                    name="radioGroup"
                    v-model="dbrid"
                    @change="checkDbrChange($event.target.value)"
                  >
                    <a-radio
                      v-for="item in nextNodeDbrList"
                      :value="item.dbrid"
                      :key="item.dbrid"
                    >
                      {{ item.dbr }}
                    </a-radio>
                  </a-radio-group>
                </div>
                <div style="margin-right: 10px">
                  短信通知：<a-checkbox
                    :defaultChecked="true"
                    @change="(e) => (smgflag = e.target.value ? '是' : '否')"
                  ></a-checkbox>
                  <span style="margin-left: 10px;">下一环节:{{ nextNode }}</span>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </a-form>
    </div>
    <vxe-modal
      width="600px"
      :destroy-on-close="true"
      height="400px"
      v-model="opinionModel"
    >
      <opinion type="日常考评办理意见" @change="optionInput"></opinion>
    </vxe-modal>
  </div>
</template>

<script>
import opinion from "@/views/everydayCheck/components/opinion";
import { checkArray, shifou } from "@/views/everydayCheck/common/GroupConfig";
import {
  xpHcyPj,
  xpHcyPjToOneExcellent,
  xpHcyPjToEmpty,
  queryXpHcy,
} from "../../api/dayPort";
export default {
  name: "flow-check-table",
  inject: ["GETFLOWCHANGE", "flowState"],
  components: { opinion },
  props: {
    sqsx: { type: Object, default: {} },
    cyxpjl: { type: Array, default: [] },
    job: { type: Object, default: {} },
    sqsxid: { type: String, default: "" },
    change: { type: Function },
    disabled: { type: Boolean, default: false },
    nextNodeDbrList:{type:Array,default:[]},
    nextNode:{type:String,default:''}
  },
  data() {
    return {
      checkValue: {},
      plainOptions: checkArray,
      form: this.$form.createForm(this, { name: "advanced_search" }),
      cyxpjlList: [],
      cyxpGrup: [
        "fljzlqk",
        "fzdjcqd",
        "fhdqxqk",
        "fxcjcqxfj",
        "fxcjczy",
        "fzhpj",
      ],
      // 办理意见
      opinion: "",
      opinionModel: false,
      // 是否
      shif: shifou,
      smgflag:"是",
      dbrid:""
    };
  },
  watch: {
    cyxpjl: {
      immediate: true,
      deep: true,
      handler() {
        this.cyxpjlList = this.cyxpjl;
      },
    },
    smgflag:{
      immediate:true,
      handler() {
        if(this.GETFLOWCHANGE) {
          this.GETFLOWCHANGE({smgflag:this.smgflag})
        }
      }
    },
    dbrid:{
      immediate:true,
      handler() {
        if(this.GETFLOWCHANGE) {
          this.GETFLOWCHANGE({dbrid:this.dbrid})
        }
      }
    },
    nextNodeDbrList:{
      immediate:true,
      deep:true,
      handler() {
        if(this.nextNodeDbrList instanceof Array && this.nextNodeDbrList.length) {
          this.dbrid = this.nextNodeDbrList[0].dbrid
        }
      }
    }
  },
  mounted() {},
  computed: {},
  methods: {
    // 清空
    async empty(item) {
      const cyxp = this.cyxpjlList;
      this.cyxpjlList = cyxp.filter((c) => {
        if (c.id === item.id) {
          return (item = this.gteGrupKey(this.cyxpGrup, item, ""));
        } else {
          return item;
        }
      });
      const res = await xpHcyPjToEmpty({ id: item.id });
      if (res.success) {
        this.refreshCheck();
      }
    },
    // 优秀
    async excellent(item) {
      const cyxp = this.cyxpjlList;
      this.cyxpjlList = cyxp.filter((c) => {
        if (c.id === item.id) {
          return (item = this.gteGrupKey(this.cyxpGrup, item, "优秀"));
        } else {
          return item;
        }
      });
      const res = await xpHcyPjToOneExcellent({ id: item.id });
      if (res.success) {
        this.refreshCheck();
      }
    },
    // 单击
    async checkChange(value, prototype, row) {
      const cyxp = this.cyxpjlList;
      const target = cyxp.find((c) => c.id == row.id);
      if (target) {
        target[prototype] = value;
      }
      this.cyxpjlList = cyxp;

      const obj = {};
      obj[prototype] = value;
      obj["id"] = row.id;
      const res = await xpHcyPj(obj);
      if (res.success) {
        this.refreshCheck();
      }
    },
    // 请求回显
    async refreshCheck() {
      const res = await queryXpHcy(this.sqsxid);
      if (res.success) {
        // this.cyxpjlList = res.result["cyxpjlList"];
      } else {
        this.$VxeMessage({ content: res.meaasge, status: "error" });
      }
    },
    checkDbrChange(value) {
      this.dbrid = value
    },
    // 办理意见
    optionInput(value) {
      this.opinion = value;
      if (this.GETFLOWCHANGE) {
        this.GETFLOWCHANGE({ opinion: this.opinion });
      }
      this.opinionModel = false;
    },
    // 备注
    async checkFbzBkur(value, prototype, row) {
      const cyxp = this.cyxpjlList;
      const target = cyxp.find((c) => c.id == row.id);
      if (target) {
        target[prototype] = value;
      }
      this.cyxpjlList = cyxp;

      const obj = {};
      obj[prototype] = value;
      obj["id"] = row.id;
      //console.log(obj, "备注");
      const res = await xpHcyPj(obj);
      if (res.success) {
        this.refreshCheck();
      }
    },
    gteGrupKey(array, object, value) {
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        for (const key in object) {
          if (Object.hasOwnProperty.call(object, key)) {
            if (element == key) {
              object[key] = value;
            }
          }
        }
      }
      return object;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/table.less";

td {
  text-align: left !important;
}
.title {
  background: rgb(241, 241, 241) !important;
  text-align: right !important;
  width: 15%;
}
</style>
